{extend name="layout:base" /}

{block name="content"}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-card">
            <div class="layui-card-header">系统情况</div>
            <div class="layui-card-body layui-text">
                <div class="layadmin-backlog">
                    <ul class="layui-row layui-col-space10">
                        <li class="layui-col-md2 layui-col-sm6 layui-col-xs12">
                            <span class="layadmin-backlog-body">
                                <h3>客户数(所有)</h3>
                                <p><cite>{$all_user}</cite></p>
                            </span>
                        </li>
                    </ul>

                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">按天情况</div>
            <div class="layui-card-body layui-text">
                <div class="layadmin-backlog">
                    <ul class="layui-row layui-col-space10">
                        <li class="layui-col-md2 layui-col-sm6 layui-col-xs12">
                            <span class="layadmin-backlog-body">
                                <h3>站点数</h3>
                                <p><cite>{$day_webInfo}</cite></p>
                            </span>
                        </li>
                        <li class="layui-col-md2 layui-col-sm6 layui-col-xs12 ">
                            <span class="layadmin-backlog-body">
                                <h3>总关键词数量</h3>
                                <p><cite>{$day_webInfo}</cite></p>
                            </span>
                        </li>
                        <li class="layui-col-md2 layui-col-sm6 layui-col-xs12 ">
                            <span class="layadmin-backlog-body">
                                <h3>今日达标词/昨日达标词</h3>
                                <p><cite>{$day_webInfo}</cite></p>
                            </span>
                        </li>
                        <li class="layui-col-md2 layui-col-sm6 layui-col-xs12 ">
                            <span class="layadmin-backlog-body">
                                <h3>今日消费/昨日消费</h3>
                                <p><cite>0</cite></p>
                            </span>
                        </li>
                        <li class="layui-col-md2 layui-col-sm6 layui-col-xs12 ">
                            <span class="layadmin-backlog-body">
                                <h3>本月消费/上月消费</h3>
                                <p><cite>0</cite></p>
                            </span>
                        </li>
                        <li class="layui-col-md2 layui-col-sm6 layui-col-xs12 ">
                            <span class="layadmin-backlog-body">
                                <h3>总达标率</h3>
                                <p><cite>0</cite></p>
                            </span>
                        </li>
                        <li class="layui-col-md2 layui-col-sm6 layui-col-xs12 ">
                            <span class="layadmin-backlog-body">
                                <h3>百度达标率</h3>
                                <p><cite>0</cite></p>
                            </span>
                        </li>
                        <li class="layui-col-md2 layui-col-sm6 layui-col-xs12 ">
                            <span class="layadmin-backlog-body">
                                <h3>百度移动达标率</h3>
                                <p><cite>0</cite></p>
                            </span>
                        </li>
                        <li class="layui-col-md2 layui-col-sm6 layui-col-xs12 ">
                            <span class="layadmin-backlog-body">
                                <h3>360达标率</h3>
                                <p><cite>0</cite></p>
                            </span>
                        </li>
                        <li class="layui-col-md2 layui-col-sm6 layui-col-xs12 ">
                            <span class="layadmin-backlog-body">
                                <h3>搜狗达标率</h3>
                                <p><cite>0</cite></p>
                            </span>
                        </li>
                        <li class="layui-col-md2 layui-col-sm6 layui-col-xs12 ">
                            <span class="layadmin-backlog-body">
                                <h3>神马达标率</h3>
                                <p><cite>0</cite></p>
                            </span>
                        </li>
                    </ul>

                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">包年情况</div>
            <div class="layui-card-body layui-text">
                <div class="layadmin-backlog">
                    <ul class="layui-row layui-col-space10">
                        <li class="layui-col-md3 layui-col-sm6 layui-col-xs12 ">
                            <span class="layadmin-backlog-body">
                                <h3>达标单/总单量</h3>
                                <p><cite>0</cite></p>
                            </span>
                        </li>
                        <li class="layui-col-md3 layui-col-sm6 layui-col-xs12 ">
                            <span class="layadmin-backlog-body">
                                <h3>客单达标率</h3>
                                <p><cite>0</cite></p>
                            </span>
                        </li>
                        <li class="layui-col-md3 layui-col-sm6 layui-col-xs12 ">
                            <span class="layadmin-backlog-body">
                                <h3>达标词数/昨日达标</h3>
                                <p><cite>0</cite></p>
                            </span>
                        </li>
                        <li class="layui-col-md3 layui-col-sm6 layui-col-xs12 ">
                            <span class="layadmin-backlog-body">
                                <h3>上词达标率/总词数</h3>
                                <p><cite>0</cite></p>
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="layui-card">
            <div class="layui-card-header">任务达标走势图</div>
            <div class="layui-card-body">
                <div class="layui-carousel layadmin-carousel layadmin-dataview" id="echart1"></div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">任务消费金额走势图</div>
            <div class="layui-card-body">
                <div class="layui-carousel layadmin-carousel layadmin-dataview" id="echart2"></div>
            </div>
        </div>

        <div class="layui-card">
            <div class="layui-card-header">版本信息</div>
            <div class="layui-card-body layui-text">
                <table class="layui-table">
                    <tbody>
                    <tr>
                        <td>当前版本</td>
                        <td>
                            <script type="text/html" template>Version 1.0.0</script>
                        </td>
                    </tr>
                    <tr>
                        <td>基于框架</td>
                        <td>
                            <script type="text/html" template>layui-v{{ layui.v }}</script>
                            + thinkPhp 5.0.24
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


{/block}

{block name="script"}
<script>
    layui.config({
        base: '__STATIC__/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'util', 'form', "carousel", "admin", "echarts"], function () {
        var $ = layui.$, form = layui.form, layer = layui.layer, table = layui.table,echarts=layui.echarts;

        var dList = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '3', '24', '25', '26', '27', '28', '29', '30', '31'];
        var myChart1 = echarts.init(document.getElementById('echart1'));
        var myChart2 = echarts.init(document.getElementById('echart2'));

        var option1 = {
            grid: {x: '20px', x2: '50px',y2:'20px'},
            tooltip: {trigger: "axis"},
            legend: {data: ["本月当天达标词数量", "上月当天达标词数量"]},
            xAxis: [{type: "category", boundaryGap: !1, data: dList}],
            yAxis: [{type: "value", axisLabel: {formatter: "{value}"}}],
            series: [{
                name: "本月当天达标词数量",
                type: "line",
                data: [11, 11, 15, 13, 12, 13, 10],
                markPoint: {data: [{type: "max", name: "最大值"}, {type: "min", name: "最小值"}]},
                markLine: {data: [{type: "average", name: "平均值"}]}
            }, {
                name: "上月当天达标词数量",
                type: "line",
                data: [1, -2, 2, 5, 3, 2, 0],
                markPoint: {data: [{name: "周最低", value: -2, xAxis: 1, yAxis: -1.5}]},
                markLine: {data: [{type: "average", name: "平均值"}]}
            }]
        };


        var option2 = {
            grid: {x: '20px', x2: '50px',y2:'20px'},
            tooltip: {trigger: "axis"},
            legend: {data: ["本月当日消费金额", "上月当日消费金额"]},
            xAxis: [{type: "category", boundaryGap: !1, data: dList}],
            yAxis: [{type: "value", axisLabel: {formatter: "{value}"}}],
            series: [{
                name: "本月当日消费金额",
                type: "line",
                data: [11, 11, 15, 13, 12, 13, 10],
                markPoint: {data: [{type: "max", name: "最大值"}, {type: "min", name: "最小值"}]},
                markLine: {data: [{type: "average", name: "平均值"}]}
            }, {
                name: "上月当日消费金额",
                type: "line",
                data: [1, -2, 2, 5, 3, 2, 0],
                markPoint: {data: [{name: "周最低", value: -2, xAxis: 1, yAxis: -1.5}]},
                markLine: {data: [{type: "average", name: "平均值"}]}
            }]
        };

        myChart1.setOption(option1);
        myChart2.setOption(option2);

        window.onresize = function() {
            myChart1.resize();
            myChart2.resize();
        };




    });
</script>
{/block}






